<template>
	<h1>这是helloworld</h1>
	<h3>请选择一门课程</h3>
	<div>
		<button v-for="(item,index) in list" @click="changList(index)">
			{{item}}
		</button>
	</div>
	<div>你选择了[{{selectVal}}]这门课程</div>
</template>

<script>
	import {ref,reactive,toRefs} from 'vue'
	export default{
		setup(props,context){//composition API的入口
			//定义响应式的对象数据
			const list = ref(["vue","react","node"])
			const selectVal = ref('')
			
			const changList = (index)=>{
				//ref写法
				// selectVal.value = list.value[index]
				
				//reactive的写法
				data.selectVal = data.list[index]
			}
			
			const data = reactive({
				list:["vue","react","node"],
				selectVal:''
			})
			
			//要在template模板上使用的变量 必须通过return 返回 才能在template中使用
			return{
				list,changList,selectVal,
				//解构对象
				...toRefs(data)
			}
		}
	}
</script>

<style scoped>
a {
  color: #42b983;
}
button{
	margin-left: 10px;
}
</style>